<template>
  <div id="app">
    <!-- 标签区域 -->
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="英雄管理" name="first">
        <!-- 添加英雄 -->
        <el-button type="primary" @click="handleAddStudent">添加英雄</el-button>

        <!-- 表格区域 -->
        <template>
          <el-table style="width: 100%" :data="studentList">
            <el-table-column label="id" width="180" prop="id"></el-table-column>
            <el-table-column label="姓名" width="180" prop="name">
            </el-table-column>
            <el-table-column label="年龄" width="180" prop="age">
            </el-table-column>
            <el-table-column label="大陆" width="180" prop="country_id">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="showSetStudentDialog(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelItemChange(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-tab-pane>
      <el-tab-pane label="大陆管理" name="second">
        <!-- 展示 添加大陆 对话框 -->
        <el-button type="primary" @click="handleAddCountry">添加大陆</el-button>

        <!-- 表格区域 -->
        <template>
          <el-table style="width: 100%" :data="countryList">
            <el-table-column label="id" width="180" prop="id"></el-table-column>
            <el-table-column label="大陆名称" width="180" prop="name">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="showSetCountryDialog(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelCountryChange(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-tab-pane>
    </el-tabs>

    <!-- 添加英雄对话框区域 -->
    <el-dialog
      title="添加英雄"
      :visible.sync="addStudentDialog"
      width="50%"
      @close="handleAddDialog"
    >
      <el-form
        :model="addRuleForm"
        :rules="addRules"
        ref="addRuleForm"
        label-width="100px"
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="addRuleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="addRuleForm.age"></el-input>
        </el-form-item>
        <el-form-item label="大陆" prop="country_id">
          <!-- <el-input v-model="addRuleForm.country_id"></el-input> -->
          <el-select v-model="createSelectValue" placeholder="请选择">
            <el-option
              v-for="item in selectList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addStudentDialog = false">取 消</el-button>
        <el-button type="primary" @click="addStudentBtn">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改英雄对话框区域 -->
    <el-dialog
      title="编辑英雄"
      :visible.sync="setStudentDialog"
      width="50%"
      @close="handleSetDialog"
    >
      <el-form
        :model="setRuleForm"
        :rules="setRules"
        ref="addRuleForm"
        label-width="100px"
      >
        <el-form-item label="id" prop="id">
          <el-input v-model="setRuleForm.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="setRuleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="setRuleForm.age"></el-input>
        </el-form-item>
        <el-form-item label="大陆" prop="age">
          <!-- <el-input v-model="setRuleForm.age"></el-input> -->
          <el-select v-model="setSelectValue" placeholder="请选择">
            <el-option
              v-for="item in selectList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setStudentDialog = false">取 消</el-button>
        <el-button type="primary" @click="setStudentBtn(setRuleForm.id)"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 添加英雄对话框区域 -->
    <el-dialog
      title="添加大陆"
      :visible.sync="addCountryDialog"
      width="50%"
      @close="handleAddDialog"
    >
      <el-form
        :model="addCountryRuleForm"
        :rules="addRules"
        ref="addRuleForm"
        label-width="100px"
      >
        <el-form-item label="大陆名称" prop="name">
          <el-input v-model="addCountryRuleForm.name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addCountryDialog = false">取 消</el-button>
        <el-button type="primary" @click="addCountryBtn">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改大陆对话框区域 -->
    <el-dialog
      title="编辑大陆"
      :visible.sync="setCountryDialog"
      width="50%"
      @close="handleSetCountryDialog"
    >
      <el-form
        :model="setCountryRuleForm"
        :rules="setRules"
        ref="addRuleForm"
        label-width="100px"
      >
        <el-form-item label="id" prop="id">
          <el-input v-model="setCountryRuleForm.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="大陆名称" prop="name">
          <el-input v-model="setCountryRuleForm.name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setCountryDialog = false">取 消</el-button>
        <el-button type="primary" @click="setCountryBtn(setCountryRuleForm.id)"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      // 所有英雄数据
      studentList: [],
      // 控制添加英雄对话框的显示与隐藏
      addStudentDialog: false,
      // 添加 表单 数据对象
      addRuleForm: {
        name: "",
        age: "",
      },
      // 添加 验证
      addRules: {
        id: [{ required: true, message: "请输入ID", trigger: "blur" }],
        name: [{ required: true, message: "请输入英雄名称", trigger: "blur" }],
        age: [{ required: true, message: "请输入英雄年龄", trigger: "blur" }],
      },
      // 控制编辑英雄对话框的显示与隐藏
      setStudentDialog: false,
      // 编辑英雄表单信息
      setRuleForm: {
        id: "",
        name: "",
        age: "",
      },
      // 编辑英雄验证
      setRules: {
        id: [{ required: true, message: "请输入ID", trigger: "blur" }],
        name: [{ required: true, message: "请输入英雄名称", trigger: "blur" }],
        age: [{ required: true, message: "请输入英雄年龄", trigger: "blur" }],
      },
      // 默认选中第一个标签
      activeName: "second",
      // 下拉菜单数据
      selectList: [],
      // 修改 selsct value
      setSelectValue: "",
      // 添加 selsct value
      createSelectValue: null,
      // 控制添加大陆的显示与隐藏
      addCountryDialog: false,
      // 添加大陆 数据
      addCountryRuleForm: {},
      // 所有大陆数据列表
      countryList: [],
      // 控制编辑大陆对话框 显示/隐藏
      setCountryDialog: false,
      // 编辑大陆 表单
      setCountryRuleForm: {},
    };
  },
  created() {
    this.getStudentList();
  },
  methods: {
    // 获取所有数据
    async getStudentList() {
      let res = await axios.get("http://127.0.0.1:7001/hero");
      this.studentList = res.data;
      console.log(res);
      console.log(this.studentList);
      let selectList = await axios.get("http://127.0.0.1:7001/country");
      this.selectList = selectList.data;
      this.countryList = selectList.data;
      console.log(selectList);
      console.log(this.selectList);
    },
    // 展示 添加英雄 对话框
    handleAddStudent() {
      this.addStudentDialog = true;
    },
    // 点击确定 添加英雄
    addStudentBtn() {
      if (!this.addRuleForm.id && !this.addRuleForm.name) {
        return this.$message("请输入要添加的内容");
      } else if (!this.addRuleForm.age) {
        return (this.addRuleForm.age = "---");
      }
      axios
        .post("http://127.0.0.1:7001/hero", {
          params: {
            student: this.addRuleForm,
            countryId: this.createSelectValue,
          },
        })
        .then(() => {
          this.addStudentDialog = false;
          this.getStudentList();
        });
      console.log(this.createSelectValue);
    },
    // 监听添加对话框 关闭 清空表单
    handleAddDialog() {
      this.addRuleForm = {};
    },
    // 点击删除
    handleDelItemChange(e) {
      this.$confirm("此操作将永远删除此内容，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios.delete(`http://127.0.0.1:7001/hero/${e}`).then(() => {
            this.getStudentList();
            this.$message.success("删除成功");
          });
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    // 判断 ID 是否存在
    isID(e) {
      this.studentList.forEach((v) => {
        if (v.id === e) {
          this.$message("此 ID 已经被其他用户占用了，请尝试其他 ID");
          this.addRuleForm.id = "";
        }
      });
    },
    // 判断 ID 输入框失焦
    handleIdBlur(e) {
      this.isID(e);
    },
    // 点击编辑 展示编辑对话框
    showSetStudentDialog(e) {
      console.log(e);
      this.setStudentDialog = true;
      this.setRuleForm = e;
    },
    // 监听编辑英雄对话框 关闭 清空表单
    handleSetDialog() {
      this.setRuleForm = {};
      this.getStudentList();
    },
    handleSetIdBlur(e) {
      this.isID(e);
    },
    // 点击确定 修改英雄信息
    setStudentBtn(e) {
      console.log(e);
      axios
        .put(`http://127.0.0.1:7001/hero/${e}`, {
          student: this.setRuleForm,
        })
        .then(() => {
          this.getStudentList();
          this.setStudentDialog = false;
          this.$message.success("修改成功");
        });
    },

    // 展示添加大陆对话框
    handleAddCountry() {
      this.addCountryDialog = true;
    },
    // 点击确定 添加 大陆
    async addCountryBtn() {
      if (!this.addCountryRuleForm.name) {
        return this.$message("请输入要添加的内容");
      }
      await axios
        .post("http://127.0.0.1:7001/country", {
          name: this.addCountryRuleForm.name,
        })
        .then(() => {
          this.addCountryDialog = false;
          this.getStudentList();
        });
    },
    // 点击删除大陆
    handleDelCountryChange(e) {
      this.$confirm("此操作将永远删除此内容，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios.delete(`http://127.0.0.1:7001/country/${e}`).then(() => {
            this.getStudentList();
            this.$message.success("删除成功");
          });
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    // 点击编辑 展示编辑大陆对话框
    showSetCountryDialog(e) {
      this.setCountryDialog = true;
      this.setCountryRuleForm = e;
    },
    // 监听 编辑大陆 对话框 关闭 清空表单
    handleSetCountryDialog() {
      this.setCountryRuleForm = {};
      this.getStudentList()
    },
    // 点击确定 修改数据
    setCountryBtn(e) {
      console.log(e);
      axios
        .put(`http://127.0.0.1:7001/country/${e}`, {
          name: this.setCountryRuleForm.name,
        })
        .then(() => {
          this.getStudentList();
          this.setCountryDialog = false;
          this.$message.success("修改成功");
        });
    },
  },
};
</script>
<style>
</style>
